<template>
  <!-- 面包屑 -->
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>我的</el-breadcrumb-item>
      <el-breadcrumb-item>个人信息</el-breadcrumb-item>
      <el-breadcrumb-item><b>基本信息</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div style="margin: 20px;">
  <el-table  :data="informationList" >
    <el-table-column label="工号" align="center" prop="number" />
    <el-table-column label="姓名" align="center" prop="name" />
    <el-table-column label="身份证号" align="center" prop="identity" />
    <el-table-column label="性别" align="center" prop="sex" />
    <el-table-column label="出生年月" align="center" prop="birth" width="180">
<!--      <template #default="scope">
        <span>{{ parseTime(scope.row.birth, '{y}-{m}-{d}') }}</span>
      </template>-->
    </el-table-column>
    <el-table-column label="等级" align="center" prop="grade" />
    <el-table-column label="人员分类" align="center" prop="employee" />
    <el-table-column label="正式编制" align="center" prop="compile" />
    <el-table-column label="角色" align="center" prop="role" />
    <el-table-column label="职称" align="center" prop="jobtitle" />
    <el-table-column label="部门名称" align="center" prop="department" />
    <el-table-column label="文化程度" align="center" prop="education" />
    <el-table-column label="主职务" align="center" prop="duties" />
    <el-table-column label="头衔" align="center" prop="title" />
    <el-table-column label="籍贯" align="center" prop="birthplace" />
    <el-table-column label="民族" align="center" prop="nation" />
    <el-table-column label="入党日期" align="center" prop="partyTime" width="180">
<!--      <template #default="scope">
        <span>{{ parseTime(scope.row.partyTime, '{y}-{m}-{d}') }}</span>
      </template>-->
    </el-table-column>
    <el-table-column label="入职日期" align="center" prop="entryDate" width="180">
<!--      <template #default="scope">
        <span>{{ parseTime(scope.row.entryDate, '{y}-{m}-{d}') }}</span>
      </template>-->
    </el-table-column>
    <el-table-column label="政治面貌" align="center" prop="politicalOutlook" />
    <el-table-column label="教育类型" align="center" prop="educationType" />
    <el-table-column label="婚姻" align="center" prop="marriage" />
    <el-table-column label="手机号" align="center" prop="phonenumber" />
<!--    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      <template #default="scope">
        <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" >修改</el-button>
        &lt;!&ndash;          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>&ndash;&gt;
      </template>
    </el-table-column>-->
  </el-table>
    <!--  分页-->
    <div class="page">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5,7]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="sizes, prev, pager, next"
          :total="totals"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import request from '@/utils/mine'
import {ref,reactive,onMounted} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {ArrowRight} from "@element-plus/icons-vue";
const informationList = ref([]);
const searchFormModel=reactive({
  name:'',
  department:'',
  employee:'',
  grade:'',
  duties:'',
  marriage:'',
  sex:'',
  education:'',
  compile:''
})
onMounted( () => {
  getPeople()
});
const getPeople = () => {
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    // 初始时不包含ID参数
  };
  //模糊查询
  if (searchFormModel.name && searchFormModel.name.trim() !== '') {
    params.name = searchFormModel.name.trim();
  }
  // 如果部门不为空，则添加到查询参数中
  if (searchFormModel.department && searchFormModel.department.trim() !== '') {
    params.department = searchFormModel.department.trim();
  }
  // 如果正式编制不为空，则添加到查询参数中
  if (searchFormModel.compile && searchFormModel.compile.trim() !== '') {
    params.compile = searchFormModel.compile.trim();
  }
  // 如果人员分类不为空，则添加到查询参数中
  if (searchFormModel.employee && searchFormModel.employee.trim() !== '') {
    params.employee = searchFormModel.employee.trim();
  }
  // 如果等级不为空，则添加到查询参数中
  if (searchFormModel.grade && searchFormModel.grade.trim() !== '') {
    params.grade = searchFormModel.grade.trim();
  }
  // 如果主职务不为空，则添加到查询参数中
  if (searchFormModel.duties && searchFormModel.duties.trim() !== '') {
    params.duties = searchFormModel.duties.trim();
  }
  // 如果性别不为空，则添加到查询参数中
  if (searchFormModel.sex && searchFormModel.sex.trim() !== '') {
    params.sex = searchFormModel.sex.trim();
  }
  // 如果婚姻状态不为空，则添加到查询参数中
  if (searchFormModel.marriage && searchFormModel.marriage.trim() !== '') {
    params.marriage = searchFormModel.marriage.trim();
  }
  // 如果文化程度不为空，则添加到查询参数中
  if (searchFormModel.education && searchFormModel.education.trim() !== '') {
    params.education = searchFormModel.education.trim();
  }
  request({
    url: '/information/select',
    method: 'get',
    params,
  }).then((req) => {
    console.log(req)
    if (200 == req.data.errorCode) {
      informationList.value = req.data.data.records.map(item => ({
        ...item,
      }));
      totals.value = req.data.data.total;
    }
  })
}
//分页
const currentPage = ref(1)
const pageSize = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let totals=ref(0);
const  blogInfo=ref([])
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  pageSize.value=val;
  getPeople()
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  currentPage.value=val;
  getPeople()
}
</script>


<style scoped>
.el-breadcrumb{
  font-size: 18px;
  margin: 20px;
}
</style>